<script lang="ts" setup>
  import {
    UserOutlined,
    SolutionOutlined,
    LoadingOutlined,
    SmileOutlined,
  } from '@ant-design/icons-vue';
  import Steps from '@sscd/steps';
</script>

<template>
  <div class="demo">
    <div class="demo-title">带图标的步骤条</div>
    <div class="demo-content">
      <Steps>
        <Steps.Step status="finish" title="Login">
          <template #icon>
            <UserOutlined />
          </template>
        </Steps.Step>
        <Steps.Step status="finish" title="Verification">
          <template #icon>
            <SolutionOutlined />
          </template>
        </Steps.Step>
        <Steps.Step status="process" title="Pay">
          <template #icon>
            <LoadingOutlined />
          </template>
        </Steps.Step>
        <Steps.Step status="wait" title="Done">
          <template #icon>
            <SmileOutlined />
          </template>
        </Steps.Step>
      </Steps>
    </div>
  </div>
</template>
